<template>
  <el-tabs style="height: 600px;">
    <el-tab-pane @click="InboxMailPage()" label="收件箱">
      <div>
        <!--内部邮件收件箱-->
        <el-table ref="multipleTable" height="500px" :data="InboxData.MailList" style="width: 100%">
          <el-table-column v-if="show" prop="pk_Mail" label="邮件ID" width="0">
          </el-table-column>
          <el-table-column prop="StatusNmae_CHS" label="状态" width="150">
          </el-table-column>
          <el-table-column prop="TypeNmae_CHS" label="类型"" width=" 150">
          </el-table-column>
          <el-table-column prop="MailTo" label="收件人" width="150">
          </el-table-column>
          <el-table-column prop="MailFrom" label="发件人" width="150">
          </el-table-column>
          <el-table-column prop="Subject" label="邮箱标题" width="200">
          </el-table-column>
          <el-table-column prop="SentDate" label="发送时间" width="200">
          </el-table-column>
          <el-table-column v-if="show" prop="Body" label="内容" width="0">
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="primary" @click="handleClick1(scope.row)" size="small">查看</el-button>
              <el-button type="danger" @click="DLE(scope.row)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="邮件内容" :visible.sync="MailConent1">
          <div v-html="Body">
          </div>
        </el-dialog>
        <el-row class="Resume_row_paging">
          <el-col :span="24">
            <div style="text-align:center;padding:10px;">
              <el-pagination background layout="prev, pager, next" :total="InboxData.Count"
                :current-page.sync="AuditInfoPage1" @current-change="InboxMailPage" :page-size="8">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-tab-pane>
    <el-tab-pane @click="QuboxMailPage()" label="发件箱">
      <!--内部邮件发件箱-->
      <el-table ref="multipleTable" :data="QutboxTableData.MailList" style="width: 100%">
        <el-table-column v-if="show" prop="pk_Mail" label="邮件ID" width="0">
        </el-table-column>
        <el-table-column prop="StatusNmae_CHS" label="状态" width="150">
        </el-table-column>
        <el-table-column prop="TypeNmae_CHS" label="类型"" width=" 150">
        </el-table-column>
        <el-table-column prop="MailTo" label="收件人" width="150">
        </el-table-column>
        <el-table-column prop="MailFrom" label="发件人" width="150">
        </el-table-column>
        <el-table-column prop="Subject" label="邮箱标题" width="200">
        </el-table-column>
        <el-table-column prop="SentDate" label="发送时间" width="200">
        </el-table-column>
        <el-table-column v-if="show" prop="Body" label="内容" width="0">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleClick2(scope.row)" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="邮件内容" :visible.sync="MailConent2">
        <div v-html="Body">
        </div>
      </el-dialog>
      <el-row class="Resume_row_paging">
        <el-col :span="24">
          <div style="text-align:center;padding:10px;">
            <el-pagination background layout="prev, pager, next" :total="QutboxTableData.Count"
              :current-page.sync="AuditInfoPage2" @current-change="QuboxMailPage" :page-size="8">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane @click="RecyclebinMailPage()" label="回收站">
      <el-table ref="multipleTable" :data="RecyclebinData.MailList" height="500" style="width: 100%">
        <el-table-column v-if="show" prop="pk_Mail" label="邮件ID" width="0">
        </el-table-column>
        <el-table-column prop="StatusNmae_CHS" label="状态" width="150">
        </el-table-column>
        <el-table-column prop="TypeNmae_CHS" label="类型"" width=" 150">
        </el-table-column>
        <el-table-column prop="MailTo" label="收件人" width="150">
        </el-table-column>
        <el-table-column prop="MailFrom" label="发件人" width="150">
        </el-table-column>
        <el-table-column prop="Subject" label="邮箱标题" width="200">
        </el-table-column>
        <el-table-column prop="SentDate" label="发送时间" width="200">
        </el-table-column>
        <el-table-column v-if="show" prop="Body" label="内容" width="0">
        </el-table-column>
        <el-dialog title="邮件内容" :visible.sync="MailConent3">
          <div v-html="Body">
          </div>
        </el-dialog>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleClick3(scope.row)" size="small">查看</el-button>
            <el-button type="danger" @click="DEL1(scope.row)" size="small">删除</el-button>
            <el-button type="danger" @click="HF(scope.row)" size="small">恢复</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="邮件内容" :visible.sync="MailConent3">
        <div v-html="Body">

        </div>
      </el-dialog>

      <el-row class="Resume_row_paging">
        <el-col :span="24">
          <div style="text-align:center;padding:10px;">
            <el-pagination background layout="prev, pager, next" :total="RecyclebinData.Count"
              :current-page.sync="AuditInfoPage3" @current-change="RecyclebinMailPage" :page-size="5">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-tab-pane>

  </el-tabs>
</template>
<style scoped>
.messageBox-prompt-test {
  width: 1000px;
}
</style>
<script>
export default {
  data () {
    return {
      InboxData: {},
      show: false,
      MailConent1: false,

      QutboxTableData: {},
      AuditInfoPage1: 1,
      AuditInfo1: [],
      AuditInfoPage2: 1,
      AuditInfo2: [],
      AuditInfoPage3: 1,
      AuditInfo3: [],
      MailConent2: false,
      MailConent3: false,
      RecyclebinData: {}

    }
  }, methods: {
    handleClick1 (row) {
      this.MailConent1 = true
      this.Body = row.Body

    }, handleClick2 (row) {
      this.MailConent2 = true
      this.Body = row.Body

    },
    handleClick3 (row) {
      this.MailConent3 = true
      this.Body = row.Body

    },
    InboxMailPage () {
      this.$axios({
        url: '/HrApi/Mail/GetMailInfo',
        method: 'Get',
        params: {
          Pk_User: this.$store.state.UserInfo.pk_User,
          ParentID: 0,
          page: this.AuditInfoPage1,
          limit: 8
        }
      }).then(res => {
        this.InboxData = res.data.data
      })
    }, DLE (row) {
      this.$confirm('此操作会将该邮件移入回收站, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: '/HrApi/Mail/UbMail',
          method: 'POST',
          data: this.$Qs.stringify({
            pk_Mail: row.pk_Mail,
          })
        }).then(res => {
          if (!res.data.code) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.InboxMailPage();
            this.RecyclebinMailPage();
          } else {
            this.$message(res.data.msg)
          }

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    QuboxMailPage () {
      this.$axios({
        url: '/HrApi/Mail/GetOutboxInfo',
        method: 'Get',
        params: {
          page: this.AuditInfoPage2,
          limit: 8,
          MailFrom: this.$store.state.UserInfo.pk_User,
        }
      }).then(res => {
        this.QutboxTableData = res.data.data
      })
    },
    RecyclebinMailPage () {
      this.$axios({
        url: '/HrApi/Mail/GetDelMailInfo1',
        method: 'Get',
        params: {
          Pk_User: this.$store.state.UserInfo.pk_User,
          page: this.AuditInfoPage3,
          limit: 8
        }
      }).then(res => {
        this.RecyclebinData = res.data.data
      })
    }, DEL1 (row) {
      this.$confirm('此操作会将该邮件永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: '/HrApi/Mail/DelMail',
          method: 'POST',
          data: this.$Qs.stringify({
            pk_Mail: row.pk_Mail
          })
        }).then(res => {
          if (!res.data.code) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.InboxMailPage();
            this.RecyclebinMailPage();
          } else {
            this.$message(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }, HF (row) {
      this.$confirm('此操作会将该邮件恢复至收件箱, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: '/HrApi/Mail/UbDelMail',
          method: 'POST',
          data: this.$Qs.stringify({
            pk_Mail: row.pk_Mail
          })
        }).then(res => {
          if (!res.data.code) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.InboxMailPage();
            this.RecyclebinMailPage();
          } else {
            this.$message(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消恢复邮件'
        });
      });
    }

  },
  mounted () {
    this.InboxMailPage();
    this.QuboxMailPage();
    this.RecyclebinMailPage();
  }
}
</script>